<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    <script src="https://cdn.bootcss.com/proj4js/2.4.3/proj4.js"></script>
    <script src="https://cdn.bootcss.com/proj4leaflet/1.0.1/proj4leaflet.min.js"></script>
    <script type="text/javascript" src='leaflet.ChineseTmsProviders.js'></script>
    <style type="text/css">
        body { padding: 0; margin: 0; }
        html, body, #map { height: 100%;}
    </style>
</head>
<body>
    <div id='map'></div>
</body>
<script>
    // map
    var map = L.map("map", {
        center: [39.915, 116.404],
        zoom: 15,
        zoomControl: false
    });

    // zoom
    L.control.zoom({
        zoomInTitle: '放大',
        zoomOutTitle: '缩小'
    }).addTo(map);


    // layer
    var baseLayers = {
        "地图": L.tileLayer.chinaProvider('GaoDe.Normal.Map', { maxZoom: 20, minZoom: 5 }),
        "影像": L.tileLayer.chinaProvider('GaoDe.Satellite.Map', { maxZoom: 20, minZoom: 5 })
    }
    var overlayLayers = {
        "标注": L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', { maxZoom: 20, minZoom: 5 })
    }
    L.control.layers(baseLayers, overlayLayers).addTo(map);
    baseLayers.地图.addTo(map);

    // custom tile layer
    L.TileLayer.T = L.TileLayer.extend({
        getTileUrl: function (coords) {
            return '../tiles/' + coords.z + '/' + coords.x + '_' + coords.y + '.png';
        },
        zIndex: 999999
    });
    map.addLayer(new L.TileLayer.T());
</script>

</html>
